<template>
  <ekDialog
    v-model="ekVisiable"
    :title="title"
    @submit="handleSubmit"
    :hideBtn="disabled"
  >
    <div class="ek-form" v-loading="loading">
      <el-form
        :model="form"
        :rules="rules"
        label-width="160px"
        ref="forms"
        :disabled="disabled"
        v-if="!loading"
      >
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="基本信息" name="first">
            <el-form-item prop="goods_name" label="商品名称">
              <ekInput v-model="form.goods_name" />
            </el-form-item>
            <el-form-item prop="category_id" label="商品分类">
              <ekSelectModel
                v-model="form.category_id"
                :name="detail.category_id_model_text"
                :mapping="{
                  label: ['category_name'],
                  value: 'id',
                }"
                modelCode="MODEL_GOODS_CATEGORY"
              />
            </el-form-item>
            <el-form-item prop="brand_id" label="商品品牌">
              <ekSelectModel
                v-model="form.brand_id"
                :name="detail.brand_id_model_text"
                :mapping="{
                  label: ['brand_name'],
                  value: 'id',
                }"
                modelCode="MODEL_GOODS_BRAND"
              />
            </el-form-item>

            <el-form-item prop="goods_cover" label="商品封面">
              <ekUploadImage
                ref="uploads"
                v-model="form.goods_cover"
                action="/admin/upload/upload"
                :autoUpload="true"
                :limit="1"
              />
            </el-form-item>
            <el-form-item prop="goods_images" label="商品轮播图">
              <ekUploadImage
                ref="uploads"
                v-model="form.goods_images"
                action="/admin/upload/upload"
                :autoUpload="true"
                :limit="4"
              />
            </el-form-item>
            <el-form-item prop="goods_desc" label="商品简介">
              <ekInput v-model="form.goods_desc" />
            </el-form-item>
            <el-form-item prop="goods_detail" label="商品详情">
              <ekEditor v-model="form.goods_detail" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品规格" name="second">
            <el-form-item prop="goods_type" label="商品规格">
              <ekRadio v-model="form.goods_type" :options="specOtions" />
            </el-form-item>
            <template v-if="form.goods_type === 'single'">
              <el-form-item prop="goods_cost" label="商品成本">
                <ekInput v-model="form.goods_cost" />
              </el-form-item>
              <el-form-item prop="goods_price" label="商品售价">
                <ekInput v-model="form.goods_price" />
              </el-form-item>
              <el-form-item prop="goods_stock" label="商品库存">
                <ekInput v-model="form.goods_stock" />
              </el-form-item>
              <el-form-item prop="goods_stock" label="商品折扣">
                <ekInput v-model="form.goods_stock" />
              </el-form-item>
            </template>
            <template v-else-if="form.goods_type === 'multi'">
              <el-form-item prop="goods_stock">
                <el-button @click="addSpec">添加规格</el-button>
              </el-form-item>
              <template v-if="form.spec.length">
                <div class="w-500" v-for="(item, index) in form.spec" :key="index">
                  <el-form-item prop="goods_stock" label="规格组">
                    <ekInput v-model="item.spec_name" />
                  </el-form-item>
                  <el-form-item prop="goods_stock" label="规格值">
                    <ekTag v-model="item.spec_values" />
                  </el-form-item>
                </div>
              </template>
            </template>
          </el-tab-pane>
          <el-tab-pane label="其他设置" name="third">
            <el-form-item prop="is_top" label="是否置顶">
              <ekRadio v-model="form.is_top" :options="stateOptions" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
  </ekDialog>
</template>

<script setup>
import {
  watch,
  getCurrentInstance,
  computed,
  reactive,
  ref,
  defineEmits,
  onMounted,
} from "vue";
import { apis } from "../data.js";
import ekDialog from "@/components/business/ekDialog/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekTableSelect from "@/components/form/ekTableSelect/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";
import ekUploadImage from "@/components/form/ekUploadImage/index.vue";
import ekEditor from "@/components/form/ekEditor/index.vue";
import ekTextarea from "@/components/form/ekTextarea/index.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekTag from "@/components/business/ekTag/index.vue";
import { objectAssignment } from "@/utils/common.js";
import { getDimensionByCode } from "@/utils/sys.js";
const props = defineProps({
  // 显示隐藏
  visiable: {
    type: Boolean,
    default: false,
  },
  rowId: {
    type: [String, Number],
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekLoading, $ekMessage } = globalProperties;

const emit = defineEmits(["update:visiable", "submit"]);

// 是否显示
const ekVisiable = computed({
  get() {
    return props.visiable;
  },
  set(value) {
    emit("update:visiable", value);
  },
});

function handleSubmit(done) {
  let url = props.rowId ? apis.edit : apis.add;
  forms.value.validate((valid) => {
    if (valid) {
      $http
        .request({
          url: url,
          method: props.rowId ? "PUT" : "POST",
          data: {
            ...form.value,
          },
        })
        .then((res) => {
          $ekMessage.success(res.message);
          emit("submit", done);
        })
        .catch((err) => {});
    }
  });
}
const loading = ref(false);
let forms = ref(null);
let form = ref({
  manage_account: "",
  manage_pwd: "",
  manage_state: "",
  department_id: "",
  role_id: "",
  id: props.rowId,
  spec: [],
});
let rules = reactive({
  manage_account: [
    { required: true, message: "请输入管理员账户", trigger: "blur" },
  ],
  manage_pwd: [
    { required: true, message: "请输入管理员密码", trigger: "blur" },
  ],
  department_state: [
    { required: true, message: "请选则管理员状态", trigger: "blur" },
  ],
  role_id: [{ required: true, message: "请选择管理员角色", trigger: "blur" }],
  department_id: [
    { required: true, message: "请选择管理员部门", trigger: "blur" },
  ],
  manage_state: [
    { required: true, message: "请选择管理员状态", trigger: "blur" },
  ],
});
const detail = ref({
  role_id_model_text: "",
  department_id_model_text: "",
  manage_state_dim_text: "",
});
// 初始化表单
async function init() {
  loading.value = true;
  // 详情或者编辑
  if (props.rowId) {
    $http
      .get(apis.detail, {
        params: {
          id: props.rowId,
        },
      })
      .then((res) => {
        if (Object.keys(res.data).length) {
          detail.value = {
            ...detail.value,
            ...res.data,
          };
          objectAssignment(form.value, res.data);
        }
        if (form.value.parent_id == 0) {
          form.value.parent_id = "";
        }
        loading.value = false;
      });
  } else {
    loading.value = false;
  }
}
const addSpec = ()=> {
  form.value.spec.push({
    spec_name: "",
    spec_values: [],
  });
}
const stateOptions = ref([]);
const specOtions = ref([]);
watch(
  () => props.visiable,
  (val) => {
    if (val) {
      init();
    }
  }
);
onMounted(async () => {
  stateOptions.value = await getDimensionByCode("DIM_TYPE_STATE");
  specOtions.value = await getDimensionByCode("DIM_TYPE_GOODS_SPEC");
});
</script>

<style scoped lang="scss"></style>
